<template>
  <div class="WorksShow">
    <h3>作品展示</h3>
    <div class="imgsss">
      <div v-for="imgItem in imgs" :key="imgItem.id" class="work-item">
        <a :href="'http://threejs.jsvry.com/index.html?name=' + imgItem.name" target="_blank">
          <img :src="imgItem.img" :alt="imgItem.title" class="work-img" />
          <p class="work-title">{{ imgItem.title }}</p>
        </a>
      </div>
    </div>
  </div>
</template>
    
<script setup>
const imgs = [
  {
    id: 1,
    img: "https://www.jsvry.com/static/images/threejs-image/1.png",
    title: "景区小广场",
    name:'jingquxiaoguangchang',
  },
  {
    id: 2,
    img: "https://www.jsvry.com/static/images/threejs-image/2.png",
    title: "云冈石窑",
    name:'yungangshiku'
  },
  {
    id: 3,
    img: "https://www.jsvry.com/static/images/threejs-image/3.png",
    title: "火车雕塑",
    name:'huochediaosu'
  },
  {
    id: 4,
    img: "https://www.jsvry.com/static/images/threejs-image/4.png",
    title: "佩奇雕塑",
    name:'peiqidiaosu'
  },
  {
    id: 5,
    img: "https://www.jsvry.com/static/images/threejs-image/5.png",
    title: "艺术中心",
    name:'yishuzhongxin'
  },
  {
    id: 6,
    img: "https://www.jsvry.com/static/images/threejs-image/6.png",
    title: "小象雕塑",
    name:'xiaoxiangdiaosu'
  },
  {
    id: 7,
    img: "https://www.jsvry.com/static/images/threejs-image/7.png",
    title: "十二生肖",
    name:'shiershengxiao'
  },
  {
    id: 8,
    img: "https://www.jsvry.com/static/images/threejs-image/8.png",
    title: "汉白玉雕塑",
    name:'hanbaiyudiaosu'
  },
  {
    id: 9,
    img: "https://www.jsvry.com/static/images/threejs-image/9.png",
    title: "人与熊艺术雕塑",
    name:'renyuxiong'
  },
  {
    id: 10,
    img: "https://www.jsvry.com/static/images/threejs-image/10.png",
    title: "若然雕塑",
    name:'ruorandiaosu'
  },
  {
    id: 11,
    img: "https://www.jsvry.com/static/images/threejs-image/11.png",
    title: "佛像",
    name:'foxiang1'
  },
  {
    id: 12,
    img: "https://www.jsvry.com/static/images/threejs-image/12.png",
    title: "古建模型",
    name:'gujianmoxing'
  },
];
</script>
    
<style scoped>
.WorksShow {
  background: #f5f5f5;
  width: 100%;
  /* height: 500px; */
  min-height: 500px;
  /* margin-top: 10px; */
}

.WorksShow > h3 {
  font-size: 32px;
  line-height: 50px;
  text-align: center;
  padding: 30px;
}

.imgsss {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: auto;
  justify-content: space-between;
}

.imgsss > .work-item {
  border-radius: 10px;
  width: 240px;
  height: 240px;
  margin: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.imgsss img {
  width: 240px;
  height: 240px;
}

.work-title {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  width: 100%;
  line-height: 45px;
  background: #00000086;
  color: #fff;
}
</style>